@use "styles/Radius.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Typography.module.scss";

.text_input_container {
  display: flex;
  border: 1px solid var(--border-2);
  gap: Spacings.$spacing02;
  padding-block: Spacings.$spacing02;
  padding-inline: Spacings.$spacing03;
  border-radius: Radius.$normal;
  align-items: center;
  width: 100%;
  background-color: var(--background-0);

  &.simple {
    border: none;
    padding: 0;

    .text_input {
      background-color: transparent;
      width: 10px;
      padding: 0;
      font-size: Typography.$small;
    }
  }

  &.small {
    padding-block: 0;

    .text_input {
      font-size: Typography.$small;
      padding: Spacings.$spacing02;
    }
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }

  .text_input {
    caret-color: var(--accent);
    border: none;
    flex: 1;
    background-color: transparent;
    padding: 0;
    font-size: Typography.$small;

    &:focus {
      box-shadow: none;
    }
  }
}
